
<template>
	<el-dialog title="" visible :show-close="false" :modal-append-to-body="false" class="wrap" size="tiny">
			 <div class="bt">评价详情</div>
	<i class="el-icon-close close" @click="cancel" style="color: white;z-index: 99;"></i>
		<el-form label-width="150px" class="form">
			<div class="left" style="width: 50%;float: left;">
			<div class="aa">
				<span>模板主题：</span>
				  <input v-model="form.mbmc" :readonly="true" icon="info" class="select-block"></input>
			</div>
			<div class="aa">
				<span>发起人数：</span>
				  <input v-model="form.sendcnt" :readonly="true" icon="info" class="select-block"></input>
			</div>
			</div>
			
			<div class="right" style="width: 50%;float: right;">
		    <div class="aa">
				<span>评价老师：</span>
				  <input v-model="form.lsmc" :readonly="true" icon="info" class="select-block"></input>
			</div>
			<div class="aa">
				<span>总星数：</span>
				  <input v-model="form.zxcnt" :readonly="true" icon="info" class="select-block"></input>
			</div>
			</div>
			<table class="tables" style="margin: 0 auto;width: 100%;">
        <tr class="trs"  v-if='false'>
            <td class="tds"></td>
            <td class="tds">1颗星</td>
            <td class="tds">2颗星</td>
            <td class="tds">3颗星</td>
            <td class="tds">4颗星</td>
            <td class="tds">5颗星</td>
            <td class="tds">拒绝比例</td>
        </tr>
        <tr class="trs"  v-if='false'>
            <td class="tds">人次</td>
            <td class="tds" style="padding-left: 16px;">{{form.x1cnt}}</td>
            <td class="tds" style="padding-left: 16px;">{{form.x2cnt}}</td>
            <td class="tds" style="padding-left: 16px;">{{form.x3cnt}}</td>
            <td class="tds" style="padding-left: 16px;">{{form.x4cnt}}</td>
            <td class="tds" style="padding-left: 16px;">{{form.x5cnt}}</td>
            <td class="tds" style="padding-left: 16px;">{{form.jprs}}</td>
        </tr>
         <tr class="trs"  v-if='false'>
            <td class="tds">占比</td>
            <td class="tds" style="padding-left: 16px;">{{form.x1bl}}</td>
            <td class="tds" style="padding-left: 16px;">{{form.x2bl}}</td>
            <td class="tds" style="padding-left: 16px;">{{form.x3bl}}</td>
            <td class="tds" style="padding-left: 16px;">{{form.x4bl}}</td>
            <td class="tds" style="padding-left: 16px;">{{form.x5bl}}</td>
            <td class="tds" style="padding-left: 16px;">{{form.jpbl}}</td>
        </tr>
		</table>
		<el-tabs v-model="activeName"  style="text-align: center;">
		<!--<el-tab-pane label="学生考勤" name="first">-->
			      <el-table :data="dataList" stripe style="width: 100%" >
					<el-table-column prop="xsmc" label="学生名称" width="80"></el-table-column>

					<el-table-column prop="xscnt" label="评价总星数" width="100"></el-table-column>

					<el-table-column prop="pjtime" label="评价时间" width="160"></el-table-column>

					<el-table-column prop="ly" label="留言"></el-table-column><br />

				  </el-table>
			    <!--</el-tab-pane>-->
	    </el-tabs>
		</el-form>
		<el-button type="primary" class="submit" @click="cancel">确定</el-button>
	</el-dialog>
</template>

<script type="text/javascript">
	import qs from 'qs'
	export default {
		props: ['params'],
		data() {
			return {
				activeName: 'first',
				form: {
					mbmc:'',
					sendcnt:'',
					lsmc:'',
					zxcnt:'',
					 x1cnt:'',
					 x2cnt:'',
					 x3cnt:'',
					 x4cnt:'',
					 x5cnt:'',
					 jprs:'',
					 x1cnt:'',
					 x2cnt:'',
					 x3cnt:'',
					 x4cnt:'',
					 x5cnt:'',
					 jpbl:'',
					 id:'',
				},
				dataList: [],
			}
		},
		created() {
           this.form.id=this.params.row.id;
			this.loadinfo();
		},
		methods: {
			loadinfo(){
 				 var logininfo = JSON.parse(localStorage.logininfo) ;
				         var params3 = qs.stringify({
				           xxid:logininfo.xxid,
				           yhid:logininfo.id,
				           id:this.form.id
						});
 				 this.axios.post(this.$store.state.api+'xspjlsbj/info',params3)
               .then( res =>  {
 							this.form=res.data.data.map1
 							this.dataList=res.data.data.map2
 					 }).catch(res => {
 						 this.$message.warning("服务器异常");
 			 				this.$emit('close', { type: 'info', cancel: true });
 					 })
 			},
			cancel() {
				this.$emit('close', { type: 'info', cancel: true })
			}
		}
	}
</script>

<style lang="less" scoped>
	.wrap {
		text-align: center;
	}
.bt{
			position: absolute;
			width: 100%;
			height: 50px;
			margin: 0 auto;
			top:0;
			left:0;
			background: #50BFFF;
			margin-bottom: 20px;
			color:white;
			text-align:left;
			line-height: 50px;
			font-size: 17px;
			padding-left: 15px;
		}

	.form {
		text-align: center;
		margin-top: 20px;
	}
	 .input {
            display: inline-block;
        }
         .tables{
          border-collapse:collapse;
          background-color: #fff;
      }
      .tds{
      	width: 2%;
      	text-align: center;
          border: 1px solid #CCCCCC;
      }

	.select-block {
		width: 50%;
		border: none;
		float: left;
		outline: none;
		border-bottom: 1px solid#CCCCCC;
		font-size: 16px;
	}

	.submit {
		width: 120px;
		margin-top: 10px;
	}
	.aa{
		margin-bottom: 15px;
		float: left;
	}
	.aa span{
		float: left;
	}
</style>
